<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞行模式定时器</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <!-- 设备外壳模拟 -->
    <div class="flex gap-8 p-8">
        <!-- 主页面 -->
        <div class="w-[360px] h-[640px] bg-white rounded-[32px] p-6 shadow-xl overflow-hidden relative">
            <div class="h-full bg-gradient-to-br from-gray-50 to-gray-100">
                <!-- 顶部状态栏 -->
                <div class="flex justify-between items-center mb-8">
                    <h1 class="text-2xl font-medium text-gray-800">定时器</h1>
                    <img src="https://unpkg.com/lucide-static@latest/icons/settings.svg" class="w-6 h-6 text-gray-600">
                </div>

                <!-- 飞行模式状态卡片 -->
                <div class="bg-white/80 backdrop-blur-lg rounded-2xl p-6 mb-6 shadow-sm border border-gray-100">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 text-sm">当前状态</p>
                            <p class="text-gray-800 text-lg font-medium mt-1">飞行模式已关闭</p>
                        </div>
                        <img src="https://unpkg.com/lucide-static@latest/icons/plane-landing.svg" class="w-8 h-8 text-gray-400">
                    </div>
                </div>

                <!-- 定时任务列表 -->
                <div class="space-y-4">
                    <div class="bg-white/80 backdrop-blur-lg rounded-2xl p-4 shadow-sm border border-gray-100">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-gray-800">每日关闭</p>
                                <p class="text-gray-500 text-sm mt-1">23:00 - 06:00</p>
                            </div>
                            <div class="w-12 h-6 bg-blue-500 rounded-full relative cursor-pointer">
                                <div class="w-5 h-5 bg-white rounded-full absolute top-0.5 right-0.5 shadow"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 添加按钮 -->
                <div class="absolute bottom-8 right-8">
                    <div class="w-14 h-14 bg-blue-500 rounded-full flex items-center justify-center shadow-lg cursor-pointer hover:bg-blue-600 transition-colors">
                        <img src="https://unpkg.com/lucide-static@latest/icons/plus.svg" class="w-6 h-6 text-white">
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加定时任务页面 -->
        <div class="w-[360px] h-[640px] bg-white rounded-[32px] p-6 shadow-xl overflow-hidden">
            <div class="h-full bg-gradient-to-br from-gray-50 to-gray-100">
                <!-- 顶部栏 -->
                <div class="flex items-center gap-4 mb-8">
                    <img src="https://unpkg.com/lucide-static@latest/icons/arrow-left.svg" class="w-6 h-6 text-gray-600 cursor-pointer">
                    <h1 class="text-xl font-medium text-gray-800">新建定时任务</h1>
                </div>

                <!-- 表单 -->
                <div class="space-y-6">
                    <div class="bg-white/80 backdrop-blur-lg rounded-2xl p-6 shadow-sm border border-gray-100">
                        <p class="text-gray-600 mb-4">选择时间</p>
                        <div class="flex justify-center gap-8">
                            <div class="text-center">
                                <p class="text-3xl font-medium text-gray-800">22</p>
                                <p class="text-gray-500 text-sm mt-1">时</p>
                            </div>
                            <div class="text-3xl font-medium text-gray-400">:</div>
                            <div class="text-center">
                                <p class="text-3xl font-medium text-gray-800">00</p>
                                <p class="text-gray-500 text-sm mt-1">分</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white/80 backdrop-blur-lg rounded-2xl p-6 shadow-sm border border-gray-100">
                        <p class="text-gray-600 mb-4">重复</p>
                        <div class="flex gap-2">
                            <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-sm">一</div>
                            <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 text-sm">二</div>
                            <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 text-sm">三</div>
                            <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 text-sm">四</div>
                            <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 text-sm">五</div>
                            <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-sm">六</div>
                            <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-sm">日</div>
                        </div>
                    </div>
                </div>

                <!-- 保存按钮 -->
                <div class="absolute bottom-8 left-6 right-6">
                    <button class="w-full bg-blue-500 text-white py-3 rounded-xl font-medium hover:bg-blue-600 transition-colors">
                        保存
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>